<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-text</title>
</head>
<body>
    <script src="../vue@2.6.14.min.js"></script>
    <h3>vue指令： v-text</h3>
    <div id="app">
        <p v-text="msg">
            <span>v-text指令</span>
            现在练习的是{{msg}}
        </p>
        <!-- <div v-text="<span>hello</span>">
            现在进行第二个测试
        </div> -->
        <div v-text="msg2">
            现在进行第3个测试
        </div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    msg: 'v-text !',
                    msg2: `<span>测试案例2</span>`
                }
            }
        })
    </script>
    <h3>
        v-text放在哪个dom元素上， 就跟哪个dom元素进行绑定 <br>

        绑定方法： v-text="变量"<br>

        这个dom元素里面的所有元素和数据，都会被替换成v-text后面的变量的内容<br>

        注意，v-text后面跟的是一个字符串包裹的变量。<br>

        这个变量所包含的内容，通过vm中返回的数据来获取。<br>

        如果变量的内容是标签元素，那么元素只会被当成字符串来解析，而不是被解析为dom元素。
    </h3>
</body>
</html>